<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
	<spring:message var="pageTitle" code="ajouterUtilisateur.pageTitle" />  
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://malsup.github.com/jquery.form.js"></script>
  <script src="<%=request.getContextPath()%>/resources/js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="<%=request.getContextPath()%>/resources/js/jquery.validationEngine-fr.js" type="text/javascript" charset="utf-8"></script>
  <script src="<%=request.getContextPath()%>/resources/js/jquery.validationEngine.js" type="text/javascript" ></script>
  <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/validationEngine.jquery.css" type="text/css"/>

	<script>
	function uploadJqueryForm(){
 	  //$('#result').html('');
 
 	  $("#avatarForm").ajaxForm({
 	  success:function(data) {
 		 $('#avatar').attr('src',data);
 	    },
 	    dataType:"text"
  	 }).submit();
	}

function uploadFormData(){
  //  $('#result').html('');
 
  var oMyForm = new FormData();
  oMyForm.append("file", fileupload.files[0]);
 
  $.ajax({
    url: 'http://localhost:8080/PopupCommunication/public/uploadAvatar/upload',
    data: oMyForm,
    dataType: 'text',
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(data){
      //$('#result').html(data);
    	$('#avatar').attr('src',data);
    	var fichier = data.split("/").pop();
    	$('#imgUser').val(fichier);  	
    	//alert( $('#imgUser').val());
    }
  });
}
 	</script>
<title>Popup | Modifier avatar</title>
</head>
<body>
	 	<h1>Modifiez votre avatar</h1>	

	 	<form id="avatarForm" method="post" action="./public/uploadAvatar/upload"  enctype="multipart/form-data">
		 	<div id="result">
				<img id="avatar" src="${avatar}" alt=""/>
			</div>	
			<label for="image_upload">Choisissez une image: </label>
			<input type="file" size="1" name="fileupload" id="fileupload"> 
		</form>
 
<!-- <button value="Submit" onclick="uploadJqueryForm()" >Upload</button><i>Using JQuery Form Plugin</i><br/> -->
<button value="Submit" onclick="uploadFormData()" id="uploadAvatar">Charger</button>
 
 		<form:form id="formUser" method="post" action="saveAvatar" modelAttribute="utilisateur">	
			 <form:hidden  id="imgUser" path="srcAvatar" value=""/>
		<div class="formseparator">
			<input type="submit" value="enregistrer" class="btn btn-lg btn-primary "/>
		</div>	
		 
		
		</fieldset>
		</form:form>	
	 	
	<script>
	$(document).ready(function(){
	    $("#formUser").validationEngine();
	   });
	</script>
</body>
</html>